<template>
    <div id="container"></div>
  </template>
  
  <script>
  import AMapLoader from "@amap/amap-jsapi-loader";
  // 设置安全秘钥
  window._AMapSecurityConfig = {
    securityJsCode: "dfb260e1e68d1c126b9743398306b775"
  };
  export default {
    props: ["city_name"],
    data() {
      return {
        //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
        //map: null
      };
    },
    mounted() {
      this.initMap();
    },
    destroyed() {
      // 组件销毁，地图销毁，否则报错
      this.map.destroy();
    },
    methods: {
      // 初始化地图
      initMap() {
        let that = this;
        AMapLoader.load({
          key: "2184ab650e9473dd3403ec0b6bbf5a9b", // 申请好的Web端开发者Key，首次调用 load 时必填
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ["AMap.Geocoder"] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
          .then(AMap => {
            this.map = new AMap.Map("container", {
              //设置地图容器id
              viewMode: "3D", //是否为3D地图模式
              zoom: 3, //初始化地图级别
              center: [105.602725, 37.076636] //初始化地图中心点位置，默认中心点是 北京
            });
            console.log("--------------------------");
            // 通过传递过来的city_name 获取实际的经纬度
            let geocoder = new AMap.Geocoder({});
            var marker = new AMap.Marker();
            geocoder.getLocation(that.city_name, function(status, result) {
              if (status === "complete" && result.geocodes.length) {
                var lnglat = result.geocodes[0].location;
                console.log("++++++", lnglat);
                //document.getElementById('lnglat').value = lnglat;
                marker.setPosition(lnglat);
                that.map.setZoomAndCenter(10, [lnglat.lng, lnglat.lat]);
                that.map.add(marker);
                that.map.setFitView(marker);
                that.$emit("lnglat", {
                  lnglat,
                  city_name: that.city_name
                });
              } else {
                log.error("根据地址查询位置失败");
              }
            });
          })
          .catch(e => {
            console.log(e);
          });
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  #container {
    padding: 0px;
    margin: 0px auto;
    width: 90%;
    height: 16rem;
  }
  </style>